<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/admin/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/admin/css/admin.css"/>
	</head>
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">用户数</p>
										<p><span class="color-org">899</span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe602;</span>
									</div>
									<div class="right-text-con">
										<p class="name">商品数</p>
										<p><span class="color-blue">1999</span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-green f-l">
										<span class="iconfont">&#xe605;</span>
									</div>
									<div class="right-text-con">
										<p class="name">订单数</p>
										<p><span class="color-green">6666</span>数据<span class="iconfont">&#xe60f;</span></p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<!--日订单图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart1" style="height: 376px;">
						</div>
					</div>
					<!--月订单图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart2" style="height: 376px;">
						</div>
					</div>
					<!--月订单饼状图-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart3" style="height: 376px;">
						</div>
					</div>
					<!--服务器信息-->
					<div class="server-panel panel panel-default">
						<div class="panel-header">服务器信息</div>
						<div class="panel-body clearfix">
							<div class="col-md-2">
								<p class="title">服务器环境</p>
								<span class="info">Apache/Tomcat 8.5 </span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器IP地址</p>
								<span class="info">127.0.0.1   </span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器域名</p>
								<span class="info">jaman.team </span>
							</div>
							<div class="col-md-2">
								<p class="title"> Java版本</p>
								<span class="info">8.0</span>
							</div>
							<div class="col-md-2">
								<p class="title">数据库信息</p>
								<span class="info">MySQL 5.5 </span>
							</div>
							<div class="col-md-2">
								<p class="title">服务器当前时间</p>
								<span class="info">2020年6月18日</span>
							</div>
						</div>
					</div>
				</div>
		</div>
		<script src="${pageContext.request.contextPath}/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/static/admin/lib/echarts/echarts.js"></script>
		<script type="text/javascript">
			layui.use(['layer','jquery'], function(){
				var layer 	= layui.layer;
				var $=layui.jquery;
				//日订单统计图表
				var myChart1;
				//月订单统计图表
				var myChart2;
				//月订单统计饼状图
				var myChart3;
				
				require.config({
				    paths: {
				        echarts: '${pageContext.request.contextPath}/static/admin/lib/echarts'
				    }
				});
				require(
				    [
				        'echarts',
				        'echarts/chart/bar',
				        'echarts/chart/line',
				        'echarts/chart/map',
				        'echarts/chart/pie'
				    ],
				    function (ec) {
				        //--- 折柱 ---
				        myChart1 = ec.init(document.getElementById('chart1'));
				        var days=[];    //数组（实际用来盛放X轴坐标值）
				         var daycounts=[];    //销量数组（实际用来盛放Y坐标值）
				         
				         $.ajax({
				         type : "get",
				         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
				         url : "${pageContext.request.contextPath}/orders/countDay",    //请求发送到ordersService处
				         data :{},
				         dataType : "json",        //返回数据形式为json
				         success : function(data) {
				        	 console.log(data);
				             //请求成功时执行该函数内容，result即为服务器返回的json对象
				             $.each(data,function(index,obj){
				            	 console.log(obj);
				            	 console.log(obj.day+","+obj.daycount);
				            	 days.push(obj.day);
				            	 daycounts.push(obj.daycount);
				             });
				             myChart1.setOption(
							        	{
									     title: {
									        text: "日订单统计",
									        textStyle: {
									            color: "rgb(85, 85, 85)",
									            fontSize: 18,
									            fontStyle: "normal",
									            fontWeight: "normal"
									        }
									    },
									    tooltip: {
									        trigger: "axis"
									    },
									    legend: {
									        data: ["订单"],
									        selectedMode: false,
									    },
									    toolbox: {
									        show: true,
									        feature: {
									            dataView: {
									                show: false,
									                readOnly: true
									            },
									            magicType: {
									                show: false,
									                type: ["line", "bar", "stack", "tiled"]
									            },
									            restore: {
									                show: true
									            },
									            saveAsImage: {
									                show: true
									            },
									            mark: {
									                show: false
									            }
									        }
									    },
									    calculable: false,
									    xAxis: [
									        {
									            type: "category",
									            boundaryGap: false,
									            data: days
									        }
									    ],
									    yAxis: [
									        {
									            type: "value"
									        }
									    ],
									     grid: {
									        x2: 30,
									        x: 50
									    },
									    series: [
									        {
									        	name: "订单数",
									            type: "line",//线性
									            smooth: true,
									            itemStyle: {
									                normal: {
									                    areaStyle: {
									                        type: "default"
									                    },
									                    color: "rgb(110, 211, 199)"
									                },
									            
									            },
									            data: daycounts
									        }
									    ]
									}
							     );
				        },
				         error : function(errorMsg) {
				             //请求失败时执行该函数
				         alert("图表请求数据失败!");
				         myChart1.hideLoading();
				         }
				    });
				       //--- 柱状 ---
					        myChart2 = ec.init(document.getElementById('chart2'));
					        var months=[];    //数组（实际用来盛放X轴坐标值）
					         var monthcounts=[];    //销量数组（实际用来盛放Y坐标值）
					         
					         $.ajax({
					         type : "get",
					         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					         url : "${pageContext.request.contextPath}/orders/countMonth",    //请求发送到ordersService处
					         data :{},
					         dataType : "json",        //返回数据形式为json
					         success : function(data) {
					        	 console.log(data);
					             //请求成功时执行该函数内容，result即为服务器返回的json对象
					             $.each(data,function(index,obj){
					            	 console.log(obj);
					            	 console.log(obj.month+","+obj.monthcount);
					            	 months.push(obj.month);
					            	 monthcounts.push(obj.monthcount);
					             });
					             myChart2.setOption(
								        	{
										     title: {
										        text: "月订单统计",
										        textStyle: {
										            color: "rgb(85, 85, 85)",
										            fontSize: 18,
										            fontStyle: "normal",
										            fontWeight: "normal"
										        }
										    },
										    tooltip: {
										        trigger: "axis"
										    },
										    legend: {
										        data: ["订单"],
										        selectedMode: false,
										    },
										    toolbox: {
										        show: true,
										        feature: {
										        	mark : {show: true},
										            dataView: {
										                show: true,
										                readOnly: false
										            },
										            magicType: {
										                show: false,
										                type: ["line", "bar", "stack", "tiled"]
										            },
										            restore: {
										                show: true
										            },
										            saveAsImage: {
										                show: true
										            },
										            mark: {
										                show: false
										            }
										        }
										    },
										    calculable: false,
										    xAxis: [
										        {
										            type: "category",
										            gridIndex: 0,
										            data: months
										        }
										    ],
										    yAxis: [
										        {
										        	gridIndex: 0,
										            type: "value"
										        }
										    ],
										     grid: {
										        x2: 30,
										        x: 50
										    },
										    series: [
										        {
										        	name: "订单数",
										            type: 'bar',//柱状
										            smooth: true,
										            itemStyle: {
										                normal: {
										                    areaStyle: {
										                        type: "default"
										                    },
										                    color: "rgb(104, 184, 142)"
										                }
										            },
										            data: monthcounts
										        }
										    ]
										}
								     );
					        },
					         error : function(errorMsg) {
					             //请求失败时执行该函数
					         alert("图表请求数据失败!");
					         myChart2.hideLoading();
					         }
					    });
					       //--- 饼状图 ---
						        myChart3 = ec.init(document.getElementById('chart3'));
						        //var months=[];    //数组（实际用来盛放X轴坐标值）
						         //var monthcounts=[];    //销量数组（实际用来盛放Y坐标值）
						         var arr=[];
						         
						         $.ajax({
						         type : "get",
						         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
						         url : "${pageContext.request.contextPath}/orders/countMonth",    //请求发送到ordersService处
						         data :{},
						         dataType : "json",        //返回数据形式为json
						         success : function(data) {
						        	 console.log(data);
						             //请求成功时执行该函数内容，result即为服务器返回的json对象
						             $.each(data,function(index,obj){
						            	 console.log(obj);
						            	 console.log(obj.month+","+obj.monthcount);
						            	 /* months.push(obj.month);
						            	 monthcounts.push(obj.monthcount); */
						            	 arr.push({
						            		 name : obj.month,
						            		 value : obj.monthcount
						            	}); 
						             });
						             myChart3.setOption(
									        	{
											     title: {
											        text: "月订单统计",
											        textStyle: {
											            color: "rgb(85, 85, 85)",
											            fontSize: 18,
											            fontStyle: "normal",
											            fontWeight: "normal"
											        }
											    },
											    tooltip: {
											        //trigger: "item"
											    },
											    legend: {
											    	orient: 'vertical', //类型垂直,默认水平
											    	x: 'left',// 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right'
											    	y: 'center', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center'
											        data: months
											    },
											    calculable : true, 
											    series: [
											        {
											            type: 'pie',//饼状
											            radius: [30,150], //圆的大小
											            center: ['50%', '60%'], 
											            roseType: 'radius',
											            data: arr,
											            itemStyle: {
															normal: {
																shadowBlur: 200,
																shadowColor: 'rgba(0, 0, 0, 0.5)'
															}
											            }
													}
											    	],
									        });
						             },
						         error : function(errorMsg) {
						         //请求失败时执行该函数
						         alert("图表请求数据失败!");
						         myChart3.hideLoading();
						         }
							});          
				    });             
				});
		</script>
	</body>
</html>
